<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单消息"
      left-text="返回"
      left-arrow
      @click-left="jump('about')"
    />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list">
        <van-col span="24">
          <van-swipe-cell>
            <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              class="goods-card"
              thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              style="text-align: left"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>

          <hr />
        </van-col>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
  //书写组件配置项目 相当于写js代码的地方
  //要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
  export default {
    //export default 相当于过去的new vue ({el:"#div"})
    //全部都是json格式

    props: {
      //注册属性，用来父子组件传递参数使用
    },
    data() {
      //定义数据的地方
      return {
        list: [],
        loading: false,
        finished: false,
      };
    },
    created() {
      //生命周期  创建后要做的事情  vue被创建时候执行的
    },
    mounted() {
      // 生命周期  挂载完成后
    },
    methods: {
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 1000);
      },

      //  方法事件处理
      jump(uri) {
        this.$router.push(
          uri,
          () => {},
          () => {}
        );
      },
    },
    components: {
      // 组件注册的地方 相当于pom文件
    },
  };
</script>

<style>
  /* 编写样式的 */
  .goods-card {
    margin: 0;
    background-color: white;
  }
  .delete-button {
    height: 100%;
  }
</style>
